<template>
    <NavBar :show-icon="false" title-text="社区" bg-color="rgb(155, 227, 229)" />
    <div class="main">
        <view class="top" :style="{ top: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view class="dispaly-just-between search">
                <view class="ipt">
                    <tn-search-box @search="searchCommunity" :search-button="false" size="sm" :border="false"
                        v-model="queryData.keywords" placeholder="搜索内容" />
                </view>

                <view class="cate w-100">
                    <view class="icon" @click="navTo(`/subPackage/community/publishCommunity`)">
                        <image src="/static/icon/s-add.png" />
                    </view>
                </view>
            </view>
            <view class="tab">
                <tn-tabs v-model="currentTabIndex" bg-color="rgba(0,0,0,0)" :bottom-shadow="false" active-color="#000"
                    active-font-size="40" :bar="false">
                    <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                        :title="item.text" />
                </tn-tabs>
            </view>
        </view>


        <view class="list" :style="{ marginTop: topNavheight + systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <!-- <Empty v-if="!loadShow && !communityListData.length" text="暂无动态" /> -->


            <view class="item" v-for="(item, index) in communityListData" :key="index"
                @click.stop="navTo(`/subPackage/community/communityDetail?id=${item.id}&is_care=${item.is_care}`)">
                <view class="user dispaly-center">
                    <view class="avatar"
                        @click.stop="navTo(`/subPackage/community/userDetail?id=${item.user_id}&is_care=${item.is_care}`)">
                        <image mode="aspectFill" :src="item.avatar" />
                    </view>
                    <view class="info">
                        <view class="name dispaly-center">
                            <view class="name">{{ item.nickname }}</view>
                            <view class="gz dispaly-align-center" v-if="item.is_care == 1">已关注</view>
                        </view>
                        <view class="time">{{ item.create_time }}</view>
                    </view>
                </view>
                <view class="title">{{ item.title }}</view>
                <view class="detail">{{ item.content }}</view>
                <view class="img-list dispaly-center" v-if="item.image.length">
                    <view class="img" v-for="(img, imgIndex) in item.image" :key="imgIndex">
                        <image mode="aspectFill" :src="img" @click.stop="preview(item.image, imgIndex)" />
                    </view>
                </view>
                <view class="option">
                    <view class="item-box dispaly-center">
                        <view class="items dispaly-center">
                            <view class="icon">
                                <image src="/static/icon/comn.png" />
                            </view>
                            <view class="num">{{ item.com_num }}</view>
                        </view>
                        <view class="items dispaly-center">
                            <view class="icon">
                                <image src="/static/icon/good.png" />
                            </view>
                            <view class="num">{{ item.praise }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <LoadMore :status="status" :show="loadShow" />
    </div>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { ref, onMounted, reactive } from 'vue';
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import { getElementHeight } from '@/utils/util'
import type { TabDataType } from '@/types/more'
import { getCommunityList } from '@/api/home/home'
import type { RequestJobParmType } from '@/types/requstParm'
import type { CommunityType } from '@/types/responseData'


let systemInfo = uni.getStorageSync('systemInfo')
const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
    {
        text: '推荐',
        type: 2,
    },
    {
        text: '关注',
        type: 1
    }
])

const queryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: '',
    user_id: 2,
    care: ''
})
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let communityListData = ref<Array<CommunityType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getCommunityList(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            communityListData.value = [...communityListData.value, ...res.data.list]
        } else {
            status.value = 'nomore'
        }
    }
}

// 搜索动态
const searchCommunity = () => {
    init()
    getListData()
}

// 初始化
const init = () => {
    // loadShow.value = false
    communityListData.value = []
    queryData.page = 1
}

// 触底分页
onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

// 下拉刷新
onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中'
    })
    queryData.keywords = ''
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

// 图片预览
const preview = (comImage: string[], index: number) => {
    uni.previewImage({
        urls: comImage,
        current: index
    })
}

// 切换tab
const changeType = ref<number>(1)
const changeTab = (item: TabDataType) => {
    changeType.value = item.type
    init()
    queryData.care = item.type == 1 ? item.type : ''
    getListData()
}


const searchValue = ref<string>('')
onLoad((option) => {
    searchValue.value = option!.searchValue as string
})

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    getListData()
    const height = await getElementHeight('.top')
    topNavheight.value = height
})

</script>

<style>
page {
    background-color: #fafafa;
}
</style>

<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #fff !important;
}

.list {
    padding: 20rpx 30rpx;

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 32rpx 25rpx;
        margin-bottom: 44rpx;

        .user {
            margin-bottom: 23rpx;

            .avatar {
                margin-right: 10rpx;

                image {
                    width: 65rpx;
                    height: 65rpx;
                    border-radius: 50%;
                }
            }

            .info {
                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: bold;
                    font-size: 26rpx;
                    color: #000000;

                    .gz {
                        margin-left: 12rpx;
                        width: 70rpx;
                        height: 28rpx;
                        border-radius: 14rpx;
                        border: 1rpx solid #008298;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 18rpx;
                        color: #008298;
                    }
                }

                .time {
                    margin-top: 10rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #7E7E7E;
                }
            }
        }

        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #000000;
        }

        .detail {
            margin: 16rpx 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            line-height: 40rpx;
        }

        .img-list {
            flex-wrap: wrap;

            .img {
                image {
                    width: 200rpx;
                    height: 200rpx;
                    border-radius: 20rpx;
                    margin: 0 6rpx;
                }
            }
        }

        .option {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 35rpx;

            .item-box {
                .items:last-child {
                    margin-left: 34rpx;
                }

                .items {
                    .icon {
                        margin-right: 10rpx;
                        padding-top: 10rpx;

                        image {
                            width: 32rpx;
                            height: 32rpx;
                        }
                    }

                    .num {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        font-size: 26rpx;
                        color: #A2A2A2;
                    }
                }
            }
        }
    }
}

.top {
    background-color: #fff;
    padding: 0 30rpx 13rpx 30rpx;
    position: fixed;
    z-index: 999;
    // top: 0;
    width: 100%;
    background-color: #fafafa;
    // background: rgb(155, 227, 229);
    // background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(250, 250, 250, 1) 100%, rgba(250, 250, 250, 1) 100%);
    padding-bottom: 20rpx;

    .search {
        .ipt {
            margin-right: 17rpx;
            flex: 5;
        }
    }

    .cate {
        flex: 0.5;
        display: flex;
        justify-content: flex-end;

        .icon {
            image {
                width: 62rpx;
                height: 62rpx;
            }
        }
    }
}
</style>